<template>
  <div id="formworkErection">
    <div>
      <div class="top">
        <img style="width: 80%; margin: 0 auto"
          src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/13.png" />
        <p>
          <span style="width: 27%; display: inline-block; text-align: center">项目基本信息</span>
          <span style="width: 45%; display: inline-block; text-align: center">签订合同</span>
          <span style="width: 25%; display: inline-block; text-align: center">申请验收</span>
        </p>
      </div>
      <p class="title" :class="{
        titleSmallFontSize: showEdition,
        titleMediumFontSize: !showEdition,
      }" style="clear: both">
        <span class="line"></span>
        节点检查
      </p>
      <van-field readonly clickable name="picker" :value="value" label="脚手架" placeholder="点击选择脚手架" right-icon="arrow"
        @click="showPicker = true" />
      <!--<van-icon name="arrow" />-->
      <van-popup v-model="showPicker" position="bottom" get-container="#popup">
        <van-picker show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
      </van-popup>

      <div style="padding: 10px">
        <div class="btn" @click="openProcess(value)">{{ value }}</div>

        <div class="btn1" @click="openProcess('xjh')" v-if="showJGtype">
          现浇混凝土结构质量检查和验收
        </div>
        <div class="btn1" @click="openProcess('ztq')" v-else>
          砖砌体结构质量检查和验收
        </div>
      </div>

      <!-- <p
        class="title"
        :class="{
          titleSmallFontSize: showEdition,
          titleMediumFontSize: !showEdition,
        }"
        style="clear: both"
      >
        <span class="line"></span>
        脚手架验收
      </p>-->
      <!-- <div style="padding: 10px">
        <div class="btn" @click="openProcess('kjs')">
          扣件式钢管脚手架检查验收表
        </div>
        <div class="btn1" @click="openProcess('zjs')">竹脚手架检查验收表</div>
      </div>
      <p
        class="title"
        :class="{
          titleSmallFontSize: showEdition,
          titleMediumFontSize: !showEdition,
        }"
        style="clear: both"
      >
        <span class="line"></span>
        墙体架构验收
      </p>
      <div style="padding: 10px">
        <div class="btn" @click="openProcess('ztq')">
          砖砌体架构质量检查和验收表
        </div>
        <div class="btn1" @click="openProcess('xjh')">
          现浇混凝土结构质量和验收表
        </div>
      </div>-->
    </div>
    <div class="footer" v-if="$store.state.isGJ && isTIjiao">
      <van-button style="margin-right: 10px;width: 90%;" size="small" type="info" @click="handleClick(SaveData)">提交</van-button>
    </div>
    <van-popup v-model="shoulm1">
      <div class="con_box">
        <h3>{{ text1.title }}</h3>
        <p>{{ text1.message }}</p>
        <div class="btnv">
          <span @click="handleClose1()" v-if="text1.btn.cancelText">
            {{
              text1.btn.cancelText
            }}
          </span>
          <span @click="handleOk1(SaveData)" v-if="text1.btn.okText">
            {{
              text1.btn.okText
            }}
          </span>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="shoulm">
      <div class="con_box">
        <h3>{{ text.title }}</h3>
        <p>{{ text.message }}</p>
        <div class="btnv">
          <span @click="handleClose()" v-if="text.btn.cancelText">
            {{ text.btn.cancelText }}
          </span>
          <span @click="handleOk(SaveData)" v-if="text.btn.okText">
            {{ text.btn.okText }}
          </span>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { FileServerProxy } from "../../utils/api";
export default {
  name: "formworkErection",
  data() {
    return {
      showEdition: "",
      SaveData: "",
      isTIjiao: false,
      tableData: "",
      shoulm: false,
      value: "扣件式钢管脚手架验收",
      columns: ["扣件式钢管脚手架验收", "竹脚手架检查验收"],
      showPicker: false,
      text: {
        title: "提示",
        message: "请确认是否发起一层立模验收申请?",
        btn: {
          okText: "确定",
          cancelText: "取消",
        },
      },
      number: "",
      text1: {
        title: '提示',
        message: '请确认是否需要更换工匠?',
        btn: {
          okText: '确定',
          cancelText: '取消'
        }
      },
      shoulm1: false,
      showJGtype: true,
      IsSaveJG: false,
      IsSaveJSJ: false,
      IsSaveZJS: false,
    };
  },
  methods: {
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
      this.updateData();
    },
    handleClose() {
      this.shoulm = false;
    },
    handleClose1() {
      this.shoulm1 = false;
      // this.shoulm = true
      if (this.IsSaveJG && (this.IsSaveJSJ || this.IsSaveZJS)) {
        this.shoulm = true;
      } else if (!this.IsSaveJG) {
        if (this.tableData.STRUCTURETYPE == 42) {
          this.$toast.fail('工匠无提交《现浇混凝土结构质量检查和验收表》节点检查表单!')
        } else {
          this.$toast.fail('工匠无提交《砖砌体结构质量检查和验收表》节点检查表单!')
        }
      } else if (!this.IsSaveJSJ) {
        this.$toast.fail('工匠无提交《扣件式钢管脚手架验收表》节点检查表单!')
      } else if (!this.IsSaveZJS) {
        this.$toast.fail('工匠无提交《竹脚手架检查验收表》节点检查表单!')
      }
    },
    handleOk1(data) {
      // this.handleButton();
      //更换工匠 标识
      window.sessionStorage.setItem('ChangeGJ', true)
      //跳入更换工匠页面
      this.$router.push({
        path: "craftsmanServices",
        query: {
          id1: '更换工匠',
          dataValue: JSON.stringify(this.tableData)
        }
      });
    },
    handleOk(data) {
      //调用当前环节的接口
      if (this.$store.state.isGJ) {
        if (
          (this.$store.state.HJZT === 4 && data.proc_name != "定位放样") ||
          (this.$store.state.HJZT === 6 && data.proc_name != "基槽验线") ||
          (this.$store.state.HJZT === 8 && data.proc_name != "一层立模") ||
          (this.$store.state.HJZT === 7 && data.proc_name != "竣工验收")
        ) {
          this.$notify({ type: "warning", message: "未到此环节!" });
        }
        if (this.$store.state.HJZT === 4 && data.proc_name == "定位放样") {
          //调用定位放样的接口
          // let parms = {
          //   bizGuid: '9ae6659d-523b-4572-b808-17c469e8eec1',
          //   wfGuid: '{612C9C60-8D18-4D23-BF32-E9D9D01BB0EA}',
          //   entityRowGuid: this.tableData.ROW_GUID,
          //   token: window.localStorage.getItem('token')
          // }
          // const res = await CreateProcessAndSendTask(parms);
          setTimeout(() => {
            this.$router.push({
              path: "/TreeSelectZL",
              query: {
                data: { TASK_ID: this.tableData, isdwfy: 1 },
                data2: "定位放样",
              },
            });
          }, 500);
        } else if (
          this.$store.state.HJZT === 6 &&
          data.proc_name == "基槽验线"
        ) {
          // let parms = {
          //   bizGuid: '475c5d81-e6aa-486f-a113-bd651a675d75',
          //   wfGuid: '{460B4B5F-C3C2-4D4D-A702-17D4B4A3252F}',
          //   entityRowGuid: this.tableData.ROW_GUID,
          //   token: window.localStorage.getItem('token')
          // }
          // const res = await CreateProcessAndSendTask(parms);
          setTimeout(() => {
            this.$router.push({
              path: "/TreeSelectZL",
              query: {
                data: { TASK_ID: this.tableData, isjcyx: 1 },
                data2: "基槽验线",
              },
            });
          }, 500);
        } else if (
          this.$store.state.HJZT === 8 &&
          data.proc_name == "一层立模"
        ) {
          // let parms = {
          //   bizGuid: '21bbc961-f41f-4a9a-827b-491ec569bc0e',
          //   wfGuid: '{7F042B34-7091-4884-A5D6-A615AE55497D}',
          //   entityRowGuid: this.tableData.ROW_GUID,
          //   token: window.localStorage.getItem('token')
          // }
          // const res = await CreateProcessAndSendTask(parms);
          setTimeout(() => {
            this.$router.push({
              path: "/TreeSelectZL",
              query: {
                data: { TASK_ID: this.tableData, isyclm: 1 },
                data2: "一层立模",
              },
            });
          }, 500);
        } else if (
          this.$store.state.HJZT === 7 &&
          data.proc_name == "竣工验收"
        ) {
          // let parms = {
          //   bizGuid: '647a2885-7dc1-44af-b57d-2d63c4ab2936',
          //   wfGuid: '{8FAD71FB-7756-4F0A-BEE8-4F6397B075A8}',
          //   entityRowGuid: this.tableData.ROW_GUID,
          //   token: window.localStorage.getItem('token')
          // }
          // const res = await CreateProcessAndSendTask(parms);
          setTimeout(() => {
            this.$router.push({
              path: "/TreeSelectZL",
              query: {
                data: { TASK_ID: this.tableData, isjgys: 1 },
                data2: "竣工验收",
              },
            });
          }, 500);
        }
      } else {
        if (
          (this.$store.state.HJZT === 4 && data.proc_name != "定位放样") ||
          (this.$store.state.HJZT === 6 && data.proc_name != "基槽验线") ||
          (this.$store.state.HJZT === 8 && data.proc_name != "一层立模") ||
          (this.$store.state.HJZT === 7 && data.proc_name != "竣工验收")
        ) {
          this.$notify({ type: "warning", message: "未到此环节!" });
        }
        if (this.$store.state.HJZT === 4 && data.proc_name == "定位放样") {
          //调用定位放样的接口
          // let parms = {
          //   bizGuid: '9ae6659d-523b-4572-b808-17c469e8eec1',
          //   wfGuid: '{612C9C60-8D18-4D23-BF32-E9D9D01BB0EA}',
          //   entityRowGuid: this.tableData.ROW_GUID,
          //   token: window.localStorage.getItem('token')
          // }
          // const res = await CreateProcessAndSendTask(parms);
          window.localStorage.setItem("isNHCW", 1);
          setTimeout(() => {
            this.$router.push({
              path: "/TreeSelect",
              query: {
                data: this.tableData,
              },
            });
          }, 500);
        } else if (
          this.$store.state.HJZT === 6 &&
          data.proc_name == "基槽验线"
        ) {
          // let parms = {
          //   bizGuid: '475c5d81-e6aa-486f-a113-bd651a675d75',
          //   wfGuid: '{460B4B5F-C3C2-4D4D-A702-17D4B4A3252F}',
          //   entityRowGuid: this.tableData.ROW_GUID,
          //   token: window.localStorage.getItem('token')
          // }
          // const res = await CreateProcessAndSendTask(parms);
          window.localStorage.setItem("isNHCW", 1);
          setTimeout(() => {
            this.$router.push({
              path: "/TreeSelect",
              query: {
                data: this.tableData,
              },
            });
          }, 500);
        } else if (
          this.$store.state.HJZT === 8 &&
          data.proc_name == "一层立模"
        ) {
          // let parms = {
          //   bizGuid: '21bbc961-f41f-4a9a-827b-491ec569bc0e',
          //   wfGuid: '{7F042B34-7091-4884-A5D6-A615AE55497D}',
          //   entityRowGuid: this.tableData.ROW_GUID,
          //   token: window.localStorage.getItem('token')
          // }
          // const res = await CreateProcessAndSendTask(parms);
          window.localStorage.setItem("isNHCW", 1);
          setTimeout(() => {
            this.$router.push({
              path: "/TreeSelect",
              query: {
                data: this.tableData,
              },
            });
          }, 500);
        } else if (
          this.$store.state.HJZT === 7 &&
          data.proc_name == "竣工验收"
        ) {
          // let parms = {
          //   bizGuid: '647a2885-7dc1-44af-b57d-2d63c4ab2936',
          //   wfGuid: '{8FAD71FB-7756-4F0A-BEE8-4F6397B075A8}',
          //   entityRowGuid: this.tableData.ROW_GUID,
          //   token: window.localStorage.getItem('token')
          // }
          // const res = await CreateProcessAndSendTask(parms);
          window.localStorage.setItem("isNHCW", 1);
          setTimeout(() => {
            this.$router.push({
              path: "/TreeSelect",
              query: {
                data: this.tableData,
              },
            });
          }, 500);
        }
      }
    },
    //一层立模过程管理
    openProcess(data) {
      switch (data) {
        case "kjs":
          this.$router.push({
            path: "/GGJSJ",
            query: {
              data: JSON.stringify(this.tableData),
              data1: JSON.stringify(this.SaveData),
              number: this.number,
            },
          });
          break;
        case "zjs":
          this.$router.push({
            path: "/ZJSJJCYSB",
            query: {
              data: JSON.stringify(this.tableData),
              data1: JSON.stringify(this.SaveData),
              number: this.number,
            },
          });
          break;
        case "ztq":
          this.$router.push({
            path: "/ZQTJGZL",
            query: {
              data: JSON.stringify(this.tableData),
              data1: JSON.stringify(this.SaveData),
              number: this.number,
            },
          });
          break;
        case "xjh":
          this.$router.push({
            path: "/XJHNT",
            query: {
              data: JSON.stringify(this.tableData),
              data1: JSON.stringify(this.SaveData),
              number: this.number,
            },
          });
          break;
        case "扣件式钢管脚手架验收":
          this.$router.push({
            path: "/GGJSJ",
            query: {
              data: JSON.stringify(this.tableData),
              data1: JSON.stringify(this.SaveData),
              number: this.number,
            },
          });
          break;
        case "竹脚手架检查验收":
          this.$router.push({
            path: "/ZJSJJCYSB",
            query: {
              data: JSON.stringify(this.tableData),
              data1: JSON.stringify(this.SaveData),
              number: this.number,
            },
          });
          break;
      }
    },
    handleClick: async function (data) {
      //一层立磨判断节点验收表单是否填写
      // this.shoulm1 = true;
      // this.tableData?.OPTYPE == '59'?this.shoulm1 = true:this.shoulm = true
      // if (this.tableData?.OPTYPE == '59') {
      //   //更换工匠 标识1
      //   this.$confirm({
      //     title: '提示',
      //     message: '请确认是否需要更换工匠？',
      //     btn: {
      //       okText: '确定',
      //       cancelText: '取消'
      //     }
      //   })
      //     .then(() => {
      //       // do something
      //       window.sessionStorage.setItem('ChangeGJ', true)
      //       //跳入更换工匠页面
      //       this.$router.push({
      //         path: 'craftsmanServices',
      //         query: {
      //           id1: '更换工匠',
      //           dataValue: JSON.stringify(this.tableData),
      //         },
      //       })
      //     })
      //     .catch(() => {
      //       console.log('no')
      //     })
      // } else {
        this.shoulm = true
      // }
    },
    updateData: async function () {
      let data = {
        ROW_GUID: this.tableData.ROW_GUID,
        PKID: this.tableData.PKID,
        JSJ: this.value,
      };
      let params = {
        accessCode: "77ad6c1591e54d4fbc45ecc90374a2a2",
        cityCode: window.localStorage.getItem("citycode")
          ? window.localStorage.getItem("citycode")
          : "441300000000",
        params: {
          dataGuid: "9d97398e-6e18-45f1-932b-bd59cb54a0be",
          strParams: JSON.stringify([data]),
          token: window.localStorage.getItem("token"),
        },
      };
      const res = await FileServerProxy(params);
      let datas = JSON.parse(res.data.data).Success;
    },
    //判断结构显示那个
    getDataJG: async function () {

      let ghjbrex = {
        procName: "up_query",
        dtParams: JSON.stringify([
          { I_USERID: "'" + this.tableData.ROW_GUID + "'", I_TYPE: 15 },
        ]),
        token: window.localStorage.getItem("token"),
      };
      let ghjbrfu = {
        accessCode: "69db6bece3a7480592e2ec753d1e335e",
        cityCode: window.localStorage.getItem("citycode")
          ? window.localStorage.getItem("citycode")
          : "441300000000",
        params: ghjbrex,
      };
      const resghjbrbe = await FileServerProxy(ghjbrfu);
      let resData = JSON.parse(resghjbrbe.data.data);
      if (resData.Data && resData.Data.length > 0) {
        if (resData.Data[0].STRUCTURETYPE == 42) {
          //现浇混泥土
          this.showJGtype = true;
        } else {
          //砖砌墙
          this.showJGtype = false;
        }
        this.getDataIsSaveJG();
      }
    },
    //判断结构类型是否填写保存
    getDataIsSaveJG: async function () {
      var I_ROW_GUID = "";
      if (this.showJGtype) {
        I_ROW_GUID = 16
      } else {
        I_ROW_GUID = 17
      }

      let ghjbrexJG = {
        procName: "up_query",
        dtParams: JSON.stringify([
          { I_USERID: "'" + this.tableData.ROW_GUID + "'", I_TYPE: I_ROW_GUID },
        ]),
        token: window.localStorage.getItem("token"),
      };
      let ghjbrfuJG = {
        accessCode: "69db6bece3a7480592e2ec753d1e335e",
        cityCode: window.localStorage.getItem("citycode")
          ? window.localStorage.getItem("citycode")
          : "441300000000",
        params: ghjbrexJG,
      };
      const resghjbrbeJG = await FileServerProxy(ghjbrfuJG);
      let resDataJG = JSON.parse(resghjbrbeJG.data.data);
      if (resDataJG.Data && resDataJG.Data.length > 0) {
        if (resDataJG.Data[0].DATA == 0) {
          //没保存
          this.IsSaveJG = false;
        } else {
          //保存
          this.IsSaveJG = true;
        }
      }
    },
    //判断脚手架是否填写（扣件式）
    getDataIsSaveKJSJSJ: async function () {

      let ghjbrexKJS = {
        procName: "up_query",
        dtParams: JSON.stringify([
          { I_USERID: "'" + this.tableData.ROW_GUID + "'", I_TYPE: 18 },
        ]),
        token: window.localStorage.getItem("token"),
      };
      let ghjbrfuKJS = {
        accessCode: "69db6bece3a7480592e2ec753d1e335e",
        cityCode: window.localStorage.getItem("citycode")
          ? window.localStorage.getItem("citycode")
          : "441300000000",
        params: ghjbrexKJS,
      };
      const resghjbrbeKJS = await FileServerProxy(ghjbrfuKJS);
      let resDataKJS = JSON.parse(resghjbrbeKJS.data.data);
      if (resDataKJS.Data && resDataKJS.Data.length > 0) {
        if (resDataKJS.Data[0].DATA1 == 0) {
          //没保存
          this.IsSaveJSJ = false;
        } else {
          //保存
          this.IsSaveJSJ = true;
        }
      }
    },
    //判断脚手架是否填写（竹脚手架）
    getDataIsSaveZJSJ: async function () {

      let ghjbrexZJS = {
        procName: "up_query",
        dtParams: JSON.stringify([
          { I_USERID: "'" + this.tableData.ROW_GUID + "'", I_TYPE: 19 },
        ]),
        token: window.localStorage.getItem("token"),
      };
      let ghjbrfuZJS = {
        accessCode: "69db6bece3a7480592e2ec753d1e335e",
        cityCode: window.localStorage.getItem("citycode")
          ? window.localStorage.getItem("citycode")
          : "441300000000",
        params: ghjbrexZJS,
      };
      const resghjbrbeZJS = await FileServerProxy(ghjbrfuZJS);
      let resDataZJS = JSON.parse(resghjbrbeZJS.data.data);
      if (resDataZJS.Data && resDataZJS.Data.length > 0) {
        if (resDataZJS.Data[0].DATA2 == 0) {
          //没保存
          this.IsSaveZJS = false;
        } else {
          //保存
          this.IsSaveZJS = true;
        }
      }
    },
    //  //阿拉伯数字转大写
    Arabia_To_SimplifiedChinese(Num) {
      for (let i = Num.length - 1; i >= 0; i--) {
        Num = Num.replace(",", ""); //替换Num中的“,”
        Num = Num.replace(" ", ""); //替换Num中的空格
      }
      if (isNaN(Num)) {
        //验证输入的字符是否为数字
        //alert("请检查小写金额是否正确");
        return;
      }
      //字符处理完毕后开始转换，采用前后两部分分别转换
      let part = String(Num).split(".");
      let newchar = "";
      //小数点前进行转化
      for (let i = part[0].length - 1; i >= 0; i--) {
        if (part[0].length > 10) {
          //alert("位数过大，无法计算");
          return "";
        } //若数量超过拾亿单位，提示
        let tmpnewchar = "";
        let perchar = part[0].charAt(i);
        switch (perchar) {
          case "0":
            tmpnewchar = "零" + tmpnewchar;
            break;
          case "1":
            tmpnewchar = "一" + tmpnewchar;
            break;
          case "2":
            tmpnewchar = "二" + tmpnewchar;
            break;
          case "3":
            tmpnewchar = "三" + tmpnewchar;
            break;
          case "4":
            tmpnewchar = "四" + tmpnewchar;
            break;
          case "5":
            tmpnewchar = "五" + tmpnewchar;
            break;
          case "6":
            tmpnewchar = "六" + tmpnewchar;
            break;
          case "7":
            tmpnewchar = "七" + tmpnewchar;
            break;
          case "8":
            tmpnewchar = "八" + tmpnewchar;
            break;
          case "9":
            tmpnewchar = "九" + tmpnewchar;
            break;
        }
        switch (part[0].length - i - 1) {
          case 0:
            tmpnewchar = tmpnewchar;
            break;
          case 1:
            if (perchar != 0) tmpnewchar = tmpnewchar + "十";
            break;
          case 2:
            if (perchar != 0) tmpnewchar = tmpnewchar + "百";
            break;
          case 3:
            if (perchar != 0) tmpnewchar = tmpnewchar + "千";
            break;
          case 4:
            tmpnewchar = tmpnewchar + "万";
            break;
          case 5:
            if (perchar != 0) tmpnewchar = tmpnewchar + "十";
            break;
          case 6:
            if (perchar != 0) tmpnewchar = tmpnewchar + "百";
            break;
          case 7:
            if (perchar != 0) tmpnewchar = tmpnewchar + "千";
            break;
          case 8:
            tmpnewchar = tmpnewchar + "亿";
            break;
          case 9:
            tmpnewchar = tmpnewchar + "十";
            break;
        }
        newchar = tmpnewchar + newchar;
      }
      //替换所有无用汉字，直到没有此类无用的数字为止
      while (
        newchar.search("零零") != -1 ||
        newchar.search("零亿") != -1 ||
        newchar.search("亿万") != -1 ||
        newchar.search("零万") != -1
      ) {
        newchar = newchar.replace("零亿", "亿");
        newchar = newchar.replace("亿万", "亿");
        newchar = newchar.replace("零万", "万");
        newchar = newchar.replace("零零", "零");
      }
      //替换以“一十”开头的，为“十”
      if (newchar.indexOf("一十") == 0) {
        newchar = newchar.substr(1);
      }
      //替换以“零”结尾的，为“”
      if (newchar.lastIndexOf("零") == newchar.length - 1) {
        newchar = newchar.substr(0, newchar.length - 1);
      }
      return newchar;
    },
  },
  mounted() {

    this.number = this.$route.query.number;
    this.tableData = JSON.parse(this.$route.query.data);
    this.SaveData = JSON.parse(this.$route.query.data1);
    this.getDataJG();

    this.getDataIsSaveKJSJSJ();
    this.getDataIsSaveZJSJ();
    this.updateData();
    this.showEdition = this.$store.state.Edition;
    if (window.localStorage.getItem('isPerTab') == 2) {
      this.isTIjiao = false
    } else {
      this.isTIjiao = true
    }
  },
};
</script>

<style scoped lang="scss">
#formworkErection {
  .top {
    height: 90px;
    /*background: #ffffff;*/
    margin-bottom: 20px;
    padding-top: 25px;
    text-align: center;

    .origin {
      width: 22px;
      height: 22px;
      background: #007aff;
      border-radius: 50%;
      display: inline-block;
    }

    .line {
      width: 20vw;
      /*height: 1px;*/
      border: 1px dashed #007aff;
      display: inline-block;
    }
  }

  .footer {
    text-align: center;
    padding: 10px 0;
  }

  height: 100vh;
  overflow: auto;
  background: #fff;
  padding: 10px;

  .title {
    width: 100%;
    height: 50px;
    /*background: #007aff;*/
    line-height: 50px;
    /*text-align: center;*/
    font-size: 20px;
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #9b9b9b;
  }

  .content {
    background: #ffffff;
    height: calc(100vh - 160px);
    overflow: auto;
    padding: 10px;

    ul li {
      width: calc(49% - 10px);
      border-radius: 20px;
      margin-top: 10px;
      margin-left: 10px;
      height: 70px;
      background-size: 100% 100% !important;
      float: left;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .btn {
    height: 80px;
    background: url("../../../static/imgs/ZLJ/52.png");
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    padding-left: 70px;
    margin-bottom: 10px;
  }

  .btn1 {
    height: 80px;
    background: url("../../../static/imgs/ZLJ/53.png");
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    padding-left: 70px;
  }

  .line {
    width: 6px;
    height: 26px;
    background: #3f8ffc;
    display: inline-block;
    margin-right: 10px;
  }

  .van-popup {
    border-radius: 10px;

    .con_box {
      width: 270px;
      line-height: 1;
      text-align: center;
      color: #4d5c82;
      padding: 15px;
      box-sizing: border-box;

      >h3 {
        font-size: 20px;
        margin-top: 10px;
        margin-bottom: 20px;
      }

      >p {
        font-size: 17px;
        margin-bottom: 30px;
      }

      .btnv {
        display: flex;
        justify-content: space-between;

        >span {
          display: block;
          width: 114px;
          background-color: #e0e5f5;
          text-align: center;
          line-height: 44px;
          font-size: 17px;
        }

        >span:last-of-type {
          background-color: #1288fe;
          color: #ffffff;
        }
      }
    }
  }
}
</style>
